<template>
  <div>
    <a-select
      mode="tags"
      :size="size"
      placeholder="Please select"
      :default-value="['a1', 'b2']"
      style="width: 200px"
      @change="handleChange"
      @search="search"
      :maxTagTextLength="5"
    >
      <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
        {{ (i + 9).toString(36) + i }}
      </a-select-option>
    </a-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      size: "default",
    };
  },
  mounted() {
    console.log(
      "newTags:",
      this.getAvailableTags(
        [
          { name: "sdfsdfsd", id: 1 },
          { name: "xcvbv", id: 2 },
          { name: "utyhy", id: 3 },
        ],
        7
      )
    );
  },
  methods: {
    handleChange(value) {
      console.log(`Selected: ${value}`);
    },
    popupScroll() {
      console.log("popupScroll");
    },
    search(value) {
      console.log(value);
    },
    getAvailableTags(metaTags, limitLength) {
      console.log('limitLength:',limitLength)
      let newTags = [];
      let currentLength = 0;
      metaTags.forEach((ele) => {
        let element = JSON.parse(JSON.stringify(ele));//j拷贝

        if (element && element.name && element.name.length > 0) {
          element.name = "#" + element.name;
          currentLength += element.name.length;
          if (currentLength <= limitLength) {
            newTags.push(element);
          } else {
            element.name = element.name.substr(
              0,
              element.name.length - (currentLength - limitLength)
            );
            if (element.name.length > 1) {
              element.name = element.name + "...";
              newTags.push(element);
            }
            return false;
          }
        }
      });
      return newTags;
    },
  },
};
</script>
